<template>
  <div class="tuijianren">
    <div class="top">
      <div class="header">
        <van-nav-bar title="TA的收益" left-arrow @click-left="onClickLeft" />
      </div>
      <div class="top-content" v-if="userData.user_info">
        <!-- 图片 -->
        <!-- <div class="top-img"> -->
        <img :src="userData.user_info.avatar" class="top-img" />
        <!-- </div> -->
        <div class="top-right">
          <div class="top-content-center">
            <span class="name">{{userData.user_info.username}}</span>
            <span>
              <img src="../assets/images/hehuoren@3x.png" v-if="hehuorenShow" />
              <img src="../assets/images/fuwushang.png" alt v-if="fuwushangShow" />
              <img src="../assets/images/huiyuan.png" alt v-if="huiyuanShow" />
              <img src="../assets/images/ic_shenfenrenzheng@2x.png" alt v-if="memberShow" />
              {{userData.user_info.vip_type_name}}
            </span>
          </div>
          <div class="top-content-right">
            <span>累计总收益</span>
            <span class="top-content-right-money">{{earningsAll}}</span>
          </div>
        </div>
      </div>
    </div>
    <div
      :class="{firstBox:index==0}"
      class="box"
      v-for="(item,index) in monthEarnings"
      :key="index"
    >
      <div class="box-top">
        <div class="box-top-left">
          <img src="../assets/images/rili@3x.png" />
          <span style="font-size:.15rem">{{item.month}}</span>
        </div>
        <div class="box-top-right">
          <span class="span-money">{{item.first_earnings}}</span>
          <span class="span">直接收益</span>
        </div>
      </div>
      <div class="box-center">
        <div class="center-left">
          <span class="center-left-money">{{item.earnings_all}}</span>
          <span>总收益（佣金）</span>
        </div>
        <!-- <div class="center-right">
          <span class="span-money">{{item.secend_earnings}}</span>
          <span class="span">间接收益</span>
        </div> -->
      </div>
      <div class="box-center" :class="{boxCenter:userData.user_info.vip_type_name !== '城市合伙人'}">
        <div class="bottom-left" v-if="userData.user_info.vip_type_name == '城市合伙人'">
          <!-- <span class="bottom-left-money">{{}}</span>
          <span>|红包分润</span> -->
        </div>
        <div class="bottom-right">
          <span class="bottom-right-money">{{item.sales_all}}</span>
          <span class="span">总销售额</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userData: {},
      memberShow: false,
      huiyuanShow: false,
      fuwushangShow: false,
      hehuorenShow: false,
      monthEarnings: {},
      earningsAll: {},
      user_id: ""
    };
  },
  mounted() {
    if (this.$route.query.user_id) {
      this.user_id = this.$route.query.user_id;
    };
    this.getUser();
    this.getMonthEarnings();
    this.getEarningsAll();
  },
  methods: {
    onClickLeft() {
      // 点击回退的时候当做地址回退
      this.$router.back();
    },
    //获取个人信息
    async getUser() {
      let params = {
        token: this.$cookies.get("token"),
        user_id: this.user_id
      };
      const res = await this.$axios.post(this.$api.getUser, params);
      if (res.code == 1) {
        this.userData = res.data;

        if (this.userData.user_info.vip_type_name == "普通会员") {
          this.memberShow = true;
        } else if (this.userData.user_info.vip_type_name == "城市合伙人") {
          this.hehuorenShow = true;
        } else if (this.userData.user_info.vip_type_name == "超级会员") {
          this.huiyuanShow = true;
        } else if (this.userData.user_info.vip_type_name == "城市服务商") {
          this.fuwushangShow = true;
        } else {
          this.memberShow = false;
          this.huiyuanShow = false;
          this.fuwushangShow = false;
          this.hehuorenShow = false;
        }
      } else {
        this.$toast("获取用户信息失败:" + res.msg);
      }
    },
    // 获取用户至成为会员至今的帐单 （月份）
    async getMonthEarnings() {
      let params = {
        token: this.$cookies.get("token"),
        user_id: this.user_id
      };
      const res = await this.$axios.post(this.$api.getMonthEarnings, params);
      if (res.code == 1) {
        this.monthEarnings = res.data;
        this.monthEarnings.forEach((item, index) => {
          let first_earnings = Number(item.first_earnings).toFixed(2);
          let secend_earnings = Number(item.secend_earnings).toFixed(2);
          let earnings_all = Number(item.earnings_all).toFixed(2);
          let sales_all = Number(item.sales_all).toFixed(2);
          item.first_earnings = first_earnings;
          item.secend_earnings = secend_earnings;
          item.earnings_all = earnings_all;
          item.sales_all = sales_all;
        });
      } else {
        this. $toast("获取用户至成为会员至今的帐单 （月份）失败：" + res.msg);
      }
    },
    // 累积总收益
    async getEarningsAll() {
      let params = {
        token: this.$cookies.get("token"),
        user_id: this.user_id
      };
      const res = await this.$axios.post(this.$api.getEarningsAll, params);
      if (res.code == 1) {
        this.earningsAll = res.data;
        this.earningsAll = this.earningsAll.toFixed(2);
      } else {
        this.$toast("获取累积总收益失败："+ res.msg)
      }
    }
  }
};
</script>

<style scoped>
.top {
  background-image: url("../assets/images/背景@3x.png");
  height: 2rem;
  background-size: 100% 100%;
}
.van-nav-bar {
  background-color: #75c2f1;
  border: none;
}
.van-nav-bar__title {
  color: white !important;
}
.van-hairline--bottom::after {
  border-bottom-width: 0;
}
.top-content {
  width: 100%;
  height: 1.22rem;
  display: flex;
  flex-direction: row;
  margin-top: 0.4rem;
}
.top-content .top-img {
  width: 0.8rem;
  height: 0.8rem;
  /* background-color: white; */
  border-radius: 50%;
  margin-left: 5%;
  margin-top: 0.2rem;
  /* overflow: hidden; */
}
.top-content-center {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-self: center;
  padding-left: 5%;
  color: white;
  line-height: 0.3rem;
}
.top-content-center img {
  width: 0.23rem;
  height: 0.14rem;
  padding-right: 5%;
  margin-top: 0.05rem;
}
.name {
  font-size: 0.18rem;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
.top-content-right {
  display: flex;
  flex-direction: column;
  align-self: center;
  padding-right: 5%;
  color: white;
  line-height: 0.3rem;
  text-align: right;
}

.top-content-right-money {
  font-size: 0.17rem;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(255, 254, 254, 1);
}
.top-right {
  width: 80%;
  display: flex;
  justify-content: space-between;
}
.firstBox {
  margin-top: -0.8rem !important;
}
.box {
  background: white;
  width: 90%;
  height: 1.8rem;
  margin-bottom: 0.3rem;
  margin-left: 5%;
  box-shadow: 0px 10px 32px 0px rgba(0, 0, 0, 0.14);
  border-radius: 0.05rem;
}
.box-top {
  display: flex;
  justify-content: space-between;
  padding-left: 3%;
  padding-top: 3%;
  padding-right: 3%;
}
.box-top-left {
  width: 50%;
}
.box-top-left img {
  width: 0.19rem;
  height: 0.18rem;
  margin-right: 5%;
}
.box-top-right {
  display: flex;
  flex-direction: column;
  text-align: right;
}
.box-center {
  display: flex;
  justify-content: space-between;
  padding-left: 3%;
  padding-top: 3%;
  padding-right: 3%;
}
.span-money {
  font-size: 0.17rem;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(0, 198, 216, 1);
}
.span {
  font-size: 0.12rem;
}
.center-left {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 60%;
}
.center-left-money {
  font-size: 0.25rem;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: rgba(0, 198, 216, 1);
}
.center-right {
  display: flex;
  flex-direction: column;
  text-align: right;
  align-self: center;
}
.bottom-left {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 60%;
  align-items: flex-end;
  width: 60%;
}
.bottom-left-money {
  font-size: 0.17rem;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: #ff2736;
}
.bottom-right {
  display: flex;
  flex-direction: column;
  text-align: right;
  align-self: center;
}
.bottom-right-money {
  font-size: 0.17rem;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: #fc9142;
}
.header >>> .van-nav-bar .van-icon {
  color: #fff;
}
.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
.boxCenter {
  justify-content: flex-end !important;
}
</style>




